<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
    <style>
      #DemoInforFlow li {
        background-color: aqua;
        /* line-height: 160px; */
        text-align: center;
        margin-bottom: 20px;
      }
      #DemoInforFlow li img {
        height: 1200px;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <ul id="DemoInforFlow">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>

      <ul id="DemoImgFlow">
        <li>
          <img lay-src="https://scpic.chinaz.net/files/pic/pic9/202105/hpic3898.jpg" />
        </li>
        <li>
          <img lay-src="https://scpic.chinaz.net/files/pic/pic9/202105/bpic23098.jpg" />
        </li>
        <li>
          <img lay-src="https://scpic.chinaz.net/files/pic/pic9/202105/apic32525.jpg" />
        </li>
        <li>
          <img lay-src="https://scpic.chinaz.net/files/pic/pic9/202105/hpic3905.jpg" />
        </li>
      </ul>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["flow"], function () {
        var flow = layui.flow,
          $ = layui.$;
        // 信息流
        flow.load({
          elem: "#DemoInforFlow", // 传DOM选择器
          // scrollElem:"", // 滚动条所在元素选择器，默认document。
          isAuto: false, //  是否自动加载。默认true。如果设为false，点会在列表底部生成一个“加载更多”的button，则只能点击它才会加载下一页数据。
          end: "<h3>我是有底线的</h3>", // 用于显示末页内容，可传入任意HTML字符。默认为：没有更多了
          // isLazyimg: true, //  是否开启图片懒加载。默认false。如果设为true，在拼接列表字符的时候，必须要用lay-src取代src
          mb: 100, // 与底部的临界距离，默认50。即当滚动条与底部产生该距离时，触发加载。 isAuto为true时有效。
          done: function (page, next) {
            //到达临界点（默认滚动触发），触发下一页
            var lis = [];
            for (var i = $("#DemoInforFlow li").length + 1; i < $("#DemoInforFlow li").length + 6; i++) {
              lis.push("<li>" + i + "</li>");
            }
            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(""), page < 3);
          },
        });
        // 图片懒加载 不传配置将会全部都懒加载
        flow.lazyimg({
          elem: "#DemoImgFlow img", // 传DOM选择器 指定到具体的img
          // scrollElem:"", // 滚动条所在元素选择器，默认document。
        });
      });
    </script>
  </body>
</html>
